import React, { Component } from 'react'
import { connect } from 'dva';
import {
    Modal,
    Toast,
    Flex,
    Button,
    Icon,
    List,
    Checkbox,
    InputItem,
    Picker
} from 'antd-mobile';
import { routerRedux } from 'dva/router';

import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { createForm } from 'rc-form';
import { invoice_all, save_btn, required, invoice_box, invCon, invIcon } from './invoice.less'

const Item = List.Item;


class Invoice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            state: 1,
            content: 1,
        };
    }

    componentDidMount() {

        // const { state, title, content, company="", code="", regAddr="", regPhone="", regBname="", regBaccount="" } = this.props.order.invoice;
        //
        // if(state!=2&&title==2){
        //     this.props.form.setFieldsValue({
        //         company,
        //         code
        //     });
        //
        // }else if(state==2&&title==2){
        //     this.props.form.setFieldsValue({
        //         company,
        //         code,
        //         regAddr,
        //         regPhone,
        //         regBname,
        //         regBaccount
        //     });
        // }

        // this.props.location.search.replace(/([^?&=]+)=([^?&=]*)/g, (m, p1, p2) => this.query[p1] = p2);
        // console.log(this.query, "query");

    }

    changeInvoice = (obj) => {
        this.props.dispatch({ type:"order/changeInvoice", obj })
    }

    submitInvoice = () => {
        const { invTitle, invState, invCompany, titleName, invId } = this.props.order.invoice;
        this.props.dispatch({ type:'order/invoicenEFF', obj:{ invId, LzID: this.props.match.params.storeId, contentText: this.state.content == 1 ? '商品明细' : '商品类别', contentTitle: invTitle == 3 ? titleName : invCompany || '暂无' }} )
    }

    onSubmit = () => {

        // const fieldsValue = this.props.form.getFieldsValue();
        // const { state, title, content, company="", code="", regAddr="", regPhone="", regBname="", regBaccount="" } = this.props.order.invoice;
        //
        // console.log(title, state);
        //
        // if(state!=2&&title==2){
        //     if (!fieldsValue.company || fieldsValue.company == '') {
        //         Toast.info('请填写单位名称');
        //         return;
        //     }
        //     if (!fieldsValue.code || fieldsValue.code.trim() == '') {
        //         Toast.info('请填写纳税人识别号');
        //         return;
        //     }
        //
        //     this.props.dispatch({ type:'order/invoicenEFF', obj:{  state, title: title == 1 ? 3 : 4, content, company: fieldsValue.company, code: fieldsValue.code, LzID: this.query.storeId } } )
        // }else if(state==2&&title==2){
        //     if (!fieldsValue.company || fieldsValue.company == '') {
        //         Toast.info('请填写单位名称');
        //         return;
        //     }
        //     if (!fieldsValue.code || fieldsValue.code == '') {
        //         Toast.info('请填写纳税人识别号');
        //         return;
        //     }
        //     if (!fieldsValue.regPhone || fieldsValue.regPhone == '') {
        //         Toast.info('请填写注册电话');
        //         return;
        //     }
        //     // if (!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(fieldsValue.regPhone.replace(/\s/g,''))) {
        //     //     Toast.info('手机号格式不正确');
        //     //     return;
        //     // }
        //     if (!fieldsValue.regAddr || fieldsValue.regAddr == '') {
        //         Toast.info('请填写注册地址');
        //         return;
        //     }
        //     if (!fieldsValue.regBname || fieldsValue.regBname == '') {
        //         Toast.info('请填写开户银行');
        //         return;
        //     }
        //     if (!fieldsValue.regBaccount || fieldsValue.regBaccount == '') {
        //         Toast.info('请填写银行账户');
        //         return;
        //     }
        //
        //     this.props.dispatch({ type:'order/invoicenEFF', obj:{ ...this.props.order.invoice, ...fieldsValue, regPhone:fieldsValue.regPhone.replace(/\s/g,''), LzID: this.query.storeId } } )
        // }else{
        //     this.props.dispatch({ type:'order/invoicenEFF', obj:{ state, title: title == 1 ? 3 : 4, content, LzID: this.query.storeId  }} )
        // }

    }

    changeState = obj => this.setState({...this.state, ...obj})

    render() {
        const { dispatch, order } = this.props;
        const { getFieldProps } = this.props.form;
        const { invoice={} } = order;
        const { invState, invTitle, invContent, invCompany, invCode, invRegAddr, invId, titleName, invContentText } = invoice;
        const { state, content } = this.state;
        
        return (
            <Flex style={{
                height:"100%",
                position: 'relative'
            }} direction="column"
                // className={addressList}
            >
                <NavTopBar dispatch={dispatch} title="发票信息"/>

                <MyScroll style={{position: 'absolute', top: '1rem', bottom: '1rem'}}>

                   <div className={invoice_all}>
                       <div className="invoice_type">
                           <div className="title">
                               发票类型
                           </div>
                           <Flex className="body">
                               <div onClick={()=>{this.changeState({ state: 1 })}} className={ state == 1 ? "select_type" : "" }>纸质发票</div>
                                {/* 电子版发票暂时不能点击。。。。 */}
                               <div style={{borderStyle: 'dashed'}} onClick={()=>{this.changeState({ state: 1 })}} className={ state == 3 ? "select_type" : "" }>电子发票</div>

                               {/* <div onClick={()=>{this.changeInvoice({ invState: "纸质发票" })}} className={ invState == "纸质发票" ? "select_type" : "" }>纸质发票</div>
                               <div onClick={()=>{this.changeInvoice({ invState: "电子发票" })}} className={ invState == "电子发票" ? "select_type" : "" }>电子发票</div> */}
                               {/* <div onClick={()=>{this.changeInvoice({ invState: 2 })}} className={ state==2 ? "select_type" : "" }>增值税专用发票</div> */}
                           </Flex>
                       </div>

                       <div style={{ padding:"0.2rem 0rem" }}>

                           <div className="invoice_type">
                               <div className="title">
                                   发票抬头
                               </div>
                               {/* 数字状态。。。 */}
                               <div className={ invCon } onClick={e => {
                                       // e.preventDefault();
                                       this.props.dispatch(routerRedux.push(`/selectInvoice/${ this.props.match.params.storeId }`));
                                   }}>
                                    <p style={{fontSize: '.28rem'}}>{ invTitle != 3 ? invCompany : titleName }</p>
                                    { invState ? invTitle == 3 ? '' : <p style={{color: '#999999'}}>{ invCode }（纳税人识别号）</p> : '' }

                                    { invTitle != 3 ? <p style={{color: '#999999'}}>{ invRegAddr }</p> : '' }
                                    <span style={{fontSize: '.28rem'}}>
                                        {invState ? invState == 2 ? '专用发票' : invTitle == 3 ? '个人' : '公司' : '去添加'}
                                        <Icon style={{height: '.4rem', width: '.4rem'}} className={ invIcon } type='right' />
                                    </span>
                               </div>

                               {/* <div className={ invCon } onClick={e => {
                                       e.preventDefault();
                                       this.props.dispatch(routerRedux.push('/selectInvoice'));
                                   }}>
                                    <p>{ titleName || invCompany }</p>

                                    { invTitle == "个人" ? '' : <p>{ invCode }（纳税人识别号）</p> }

                                    { invState == "增值税专用发票" ? <p>{ invRegAddr }</p> : '' }

                                    <span onClick={e => {
                                            // 去选择抬头信息
                                            e.preventDefault();
                                            this.props.dispatch(routerRedux.push('/selectInvoice'));
                                        }}>
                                    <span>
                                        { invTitle || invState }
                                        <Icon className={ invIcon } type='right' />
                                    </span>
                               </div> */}




                               {/* {
                                   state != 2 ?
                                   <Flex className="body">
                                       <div
                                           onClick={()=>{
                                               this.changeInvoice({ title:1 })
                                           }}
                                           className={ title == 1 ? "select_type" : "" }>个人</div>
                                       <div
                                           onClick={()=>{
                                               this.changeInvoice({ title:2 })
                                           }}
                                           className={ title == 2 ? "select_type" : "" }
                                       >
                                           单位
                                       </div>
                                   </Flex> : ""
                               } */}
                           </div>

                           {/* <div className="input">
                               {
                                   title == 2 && state == 1 ?
                                   <div>
                                       <InputItem
                                           {...getFieldProps('company')}
                                           clear
                                           placeholder="请输入单位名称"
                                       ></InputItem>

                                       <InputItem
                                           {...getFieldProps('code')}
                                           clear
                                           placeholder="请输入纳税人识别号"
                                       ></InputItem>
                                   </div> : ""
                               }

                               {
                                   state == 2 ?
                                       <div>
                                           <InputItem
                                               {...getFieldProps('company')}
                                               className={ required }
                                               placeholder="单位名称"
                                               extra="* 必填"
                                           ></InputItem>

                                           <InputItem
                                               {...getFieldProps('code')}
                                               className={ required }
                                               placeholder="纳税人识别号"
                                               extra="* 必填"
                                           ></InputItem>

                                           <InputItem
                                               {...getFieldProps('regAddr')}
                                               placeholder="注册地址"
                                               className={ required }
                                               extra="* 必填"
                                           ></InputItem>

                                           <InputItem
                                               className={ required }
                                               {...getFieldProps('regPhone')}
                                               type='phone'
                                               placeholder="注册电话"
                                               extra="* 必填"
                                           ></InputItem>
                                           <InputItem
                                               {...getFieldProps('regBname')}
                                               placeholder="开户银行"
                                               className={ required }
                                               extra="* 必填"
                                           ></InputItem>
                                           <InputItem
                                               {...getFieldProps('regBaccount')}
                                               placeholder="银行账号"
                                               className={ required }
                                               extra="* 必填"
                                           ></InputItem>
                                       </div> : ""
                               }

                           </div> */}

                       </div>

                       <div className="invoice_type">
                           <div className="title">
                               发票内容
                           </div>
                           <div className="body">
                               {/* <div onClick={()=>{this.changeInvoice({ invContentText: '商品明细' })}} className={ invContentText == '商品明细' ? "select_type" : "" }>商品明细</div>
                               <div onClick={()=>{this.changeInvoice({ invContentText: '商品类别' })}} className={ invContentText == '商品类别' ? "select_type" : "" }>商品类别</div> */}
                               <div onClick={()=>{this.changeState({ content: 1 })}} className={ content == 1 ? "select_type" : "" }>商品明细</div>
                               <div onClick={()=>{this.changeState({ content: 2 })}} className={ content == 2 ? "select_type" : "" }>商品类别</div>
                               {/* <div onClick={()=>{this.changeInvoice({ content: 2 })}} className={ content == 2 ? "select_type" : "" }>明细</div>
                               <div onClick={()=>{this.changeInvoice({ content: 3 })}} className={ content == 3 ? "select_type" : "" }>耗材</div> */}
                           </div>
                       </div>

                   </div>
                </MyScroll>

                <Button className={save_btn} onClick={this.submitInvoice} type='primary'>确定</Button>
                {/* <Button className={save_btn} onClick={this.onSubmit} type='primary'>确定</Button> */}
            </Flex>
        )


    }
}



export default connect(({order})=>({order}))(createForm()(Invoice))
